<script setup>
import {
    ref, onMounted
} from 'vue'
let ctx = null;
onMounted(() => {
    var canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");

    // --绘制弹窗框架
    let frameBox = new FrameBox(50, 50, 300, 160, 5)
    frameBox.draw(ctx);
    let frameBox2 = new FrameBox(50, 350, 300, 160, 5)
    frameBox2.draw(ctx);
    // --绘制输入框
    let inputBox = new InputBox(60, 90, 260, 20, 5)
    inputBox.draw(ctx);
    let inputBox2 = new InputBox(60, 130, 260, 20, 5)
    inputBox2.draw(ctx);
})

class FrameBox {
    constructor(x, y, w, h, r) {
        // 绘制圆角弹窗
        this.x = x;
        this.y = y; this.w = w; this.h = h; this.r = r;
    }
    draw() {
        let lineWidth = 1; // 边框线宽
        let bgColor = "#f3f3f3"; // 背景颜色
        let borderColor = "#666"; // 边框颜色

        ctx.lineWidth = lineWidth;
        ctx.fillStyle = bgColor;
        ctx.strokeStyle = borderColor;

        ctx.beginPath();
        ctx.moveTo(this.x + this.r, this.y);
        ctx.lineTo(this.x + this.w - this.r, this.y);
        ctx.arc(this.x + this.w - this.r, this.y + this.r, this.r, -Math.PI / 2, 0);
        ctx.lineTo(this.x + this.w, this.y + this.h - this.r);
        ctx.arc(this.x + this.w - this.r, this.y + this.h - this.r, this.r, 0, Math.PI / 2);
        ctx.lineTo(this.x + this.r, this.y + this.h);
        ctx.arc(this.x + this.r, this.y + this.h - this.r, this.r, Math.PI / 2, Math.PI);
        ctx.lineTo(this.x, this.y + this.r);
        ctx.arc(this.x + this.r, this.y + this.r, this.r, Math.PI, -Math.PI / 2);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        // 绘制弹窗标题
        ctx.fillStyle = "#000";
        ctx.font = "bold 14px Arial";
        ctx.textAlign = "center";
        ctx.fillText("弹窗标题", 200, 75);

        // 绘制关闭按钮
        ctx.beginPath();
        ctx.moveTo(330, 60);
        ctx.lineTo(340, 70);
        ctx.moveTo(340, 60);
        ctx.lineTo(330, 70);
        ctx.strokeStyle = "#000";
        ctx.stroke();
    }
}
class InputBox {
    constructor(x, y, w, h, r) {
        // 绘制输入框
        this.x = x;
        this.y = y; this.w = w; this.h = h; this.r = r;
    }

    draw() {

        let lineWidth = 1; // 边框线宽
        let bgColor = "#fff"; // 背景颜色
        let borderColor = "#000"; // 边框颜色

        ctx.lineWidth = lineWidth;
        ctx.fillStyle = bgColor;
        ctx.strokeStyle = borderColor;

        ctx.beginPath();
        ctx.moveTo(this.x + this.r, this.y);
        ctx.lineTo(this.x + this.w - this.r, this.y);
        ctx.arc(this.x + this.w - this.r, this.y + this.r, this.r, -Math.PI / 2, 0);
        ctx.lineTo(this.x + this.w, this.y + this.h - this.r);
        ctx.arc(this.x + this.w - this.r, this.y + this.h - this.r, this.r, 0, Math.PI / 2);
        ctx.lineTo(this.x + this.r, this.y + this.h);
        ctx.arc(this.x + this.r, this.y + this.h - this.r, this.r, Math.PI / 2, Math.PI);
        ctx.lineTo(this.x, this.y + this.r);
        ctx.arc(this.x + this.r, this.y + this.r, this.r, Math.PI, -Math.PI / 2);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        // 绘制输入框文本
        ctx.fillStyle = "#000";
        ctx.font = "14px Arial";
        ctx.fillText("请输入内容", this.x + 50, this.y + 15);
    }
}

</script>
<template>
    <view>
        <canvas id="myCanvas" width="450" height="600">
            不是所有浏览器都支持，可以在标签内提示，您的浏览器不支持canvas，请升级
        </canvas>
    </view>
</template>